前言：TypeScript 這麼好，不推嗎？

歡迎來到 30 天的 TypeScript 挑戰之旅！如果你曾經在開發中因為 TypeScript 錯誤而頭疼，那麼這個系列就是為你準備的。在接下來的 30 天裡，我將每天為大家出一道 TypeScript 的實戰問題，這些問題源自我開發中的實際挑戰，我們將一起深度探索，解決問題，並提升編碼能力。

TypeScript 是現代 JavaScript 開發中不可或缺的工具，讓我們的程式碼更嚴謹、能做到型別安全而且更具可讀性，並降低了錯誤的發生機率。不過，即便有了這樣的工具，我們仍然不可避免地會遇到各種錯誤和挑戰。所以我希望通過每天的「實戰演練」，帶領大家一步步攻克這些難題，最終掌握 TypeScript 的精髓。

遊戲規則

1. 每日一題：

   • 文章上半部階段都會有一個 TypeScript 的挑戰或錯誤案例，我們要一起來「debug」！
   • 下半部會偏向於深入進階的實戰心法

2. 思路解法：

   • 首先會從錯誤訊息中找尋線索，最後才提供解法，了解出錯的原因，避免未來遇到一樣或類似的坑。

3. 學習目標：

   • 到 30 天結束時，你將能夠熟練處理各種常見的 TypeScript 錯誤和挑戰，並具備面對更多複雜情境的能力。這不僅是提升技術的過程，還是一場與 TypeScript 一起成長的旅程。

我們的終極目標，是能夠輕鬆面對 TypeScript 的錯誤處理，並能夠舉一反三，在工作中運用學到的知識。

希望大家能享受這 30 天的學習過程，並一起成為更好的 TypeScript 開發者！

那我們開始吧！

程式碼

function addVAT(price, vat = 0.2) {
	return price * (1 + vat);
}

const thisErros = addVAT(20, 'this does not work')

const boom = addVAT('not a string!');

聰明的小夥伴應該看出問題了吧？

錯誤提示

function addVAT(price, vat = 0.2) {
return price * (1 + vat);
}
const thisErros = addVAT(20, 'this does not work')

const boom = addVAT('not a string!');

Errors in code

• Parameter 'price' implicitly has an 'any' type.
• Argument of type 'string' is not assignable to parameter of type 'number'.

解讀錯誤訊息

• 參數price的型別沒有被明確定義
• 傳遞一個 string 型別的值給一個預期接收 number 型別的參數。具體來說，函數 addVAT 預期 price 參數是 number，但是傳遞了字串 'not a string!'，這會導致錯誤

解決步驟

• 將 price 和 vat 的型別明確定義為 number
• 在call function 時，傳入的參數必須是 number。傳入 string 會觸發 TypeScript 錯誤。
• 捕捉意外的類型並且錯誤處理

最後結果

function addVAT(price: number, vat: number = 0.2): number {
  return price * (1 + vat);
}

const validResult = addVAT(20); // 正確，返回 24
const invalidResult = addVAT(20, 0.1); // 正確，返回 22
// const thisError = addVAT(20, 'this does not work'); // 這行會報錯，因為 'this does not work' 是字串
// const boom = addVAT('not a string!'); // 這行會報錯，因為 'not a string!' 不是數字

演練網址：
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

總結小語

• 型別註解：明確定義函數參數型別，避免 any。
• 型別匹配：確保參數傳入值與預期型別一致。
• 錯誤預防：利用 TypeScript 的編譯時型別檢查防止常見錯誤。

補充資源

• TypeScript 讓你更輕鬆，不再為 JavaScript 型別錯誤煩惱